<template>
  <!-- 知识计算-知识补全 -->
  <div class="general-page">
    <el-form :inline="true" v-model="searchParams" class="page-search">
      <el-form-item label="实体名称">
        <el-input
          v-model="searchParams.entityName"
          placeholder="请输入内容"
          clearable
          size="small"
          style="width: 240px"
        ></el-input>
      </el-form-item>
      <el-form-item label="关系名称">
        <el-input
          v-model="searchParams.relationName"
          placeholder="请输入内容"
          clearable
          size="small"
          style="width: 240px"
        ></el-input>
      </el-form-item>
      <el-form-item label="推荐来源" class="recommendSource">
        <el-select
          v-model="searchParams.recommendSource"
          size="small"
          clearable
          placeholder="请选择推荐来源"
          style="width: 240px"
        >
          <el-option
            v-for="(s, idx) in recommendOptions"
            :key="idx"
            :label="s.label"
            :value="s.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="入库状态" class="status">
        <el-select
          v-model="searchParams.status"
          clearable
          size="small"
          placeholder="请选择入库状态"
          style="width: 240px"
        >
          <el-option label="待处理" :value="0"></el-option>
          <el-option label="入库" :value="1"></el-option>
          <el-option label="取消" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="small"
          @click="searchData"
          style="width: 60px"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <div class="page-table">
      <div class="table-toolbar">
        <div class="table-title">知识补全</div>
        <div class="table-opera">
          <el-button type="primary" size="small" @click="batchCancel">
            批量取消
          </el-button>
          <el-button type="primary" size="small" @click="batchStorage">
            批量入库
          </el-button>
        </div>
      </div>
      <el-table
        :data="tableList"
        class="map-manage"
        v-loading="loading"
        :header-cell-style="{ background: '#F3F4F8', color: '#000000' }"
        :cell-style="{ color: '#333333' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50" align="center">
        </el-table-column>
        <el-table-column
          type="index"
          label="序号"
          width="50"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="headEntityName"
          label="头实体名称"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="headOntologyName"
          label="头实体所属类别"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="relationName"
          label="关系"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="tailEntityName"
          label="尾实体名称"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="tailOntologyName"
          label="尾实体所属类别"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="confidence"
          label="置信度（%）"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.confidence || "---" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="recommendSource"
          label="推荐来源"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <template v-if="scope.row.recommendType === 1">
              {{ scope.row.recommendSource || "---" }}
            </template>
            <template v-else-if="scope.row.recommendType === 2"
              >算法推荐
            </template>
            <template v-else>---</template>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="180"
          fixed="right"
          align="center"
          class="operation"
        >
          <template slot-scope="scope">
            <el-link
              v-if="scope.row.status === 0"
              class="handle-button"
              :underline="false"
              type="primary"
              @click.native.prevent="storageRow(scope.row)"
              >入库</el-link
            >
            <el-link
              v-if="scope.row.status === 0"
              :underline="false"
              class="handle-button"
              type="primary"
              @click.native.prevent="cancelStore(scope.row)"
            >
              取消
            </el-link>
            <el-link
              v-if="scope.row.status !== 0"
              :underline="false"
              class="handle-button"
              type="primary"
            >
              <template v-if="scope.row.status === 1"> 已入库 </template>
              <template v-else-if="scope.row.status === 2"> 已取消 </template>
              <template v-else> 未知状态 </template>
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-pagination" v-if="total">
        <el-pagination
          background
          layout="total, prev, pager, next,sizes, jumper"
          :total="total"
          :pager-count="5"
          :page-sizes="[10, 20, 30]"
          :current-page.sync="searchParams.pageNum"
          :page-size.sync="searchParams.pageSize"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "KnowledgeCompletion",
  components: {},
  data: () => {
    return {
      searchParams: {
        entityName: null, // 实体名称
        relationName: null, // 关系名称
        recommendSource: null, // 推荐来源
        status: null, // 融合状态
        pageNum: 1, // 页码
        pageSize: 10, // 每页条数
      },
      tableList: [], // 数据列表
      total: 0, // 数据总条数
      loading: false,
      selections: [], // 选中项
      recommendOptions: [{ label: "算法推荐", value: "算法推荐" }],
    };
  },
  created() {
    this.getPageData();
  },
  methods: {
    getPageData() {
      this.loading = true;
      this.$axios
        .get(
          this.$api.knowledgeComputation.knowledgeCompletion.getCompletionList,
          {
            params: this.searchParams,
          }
        )
        .then((res) => {
          const { data, message, code } = res.data;
          if (code === 200) {
            this.tableList = data.list;
            this.total = data.total;
          } else {
            this.$message.warning(message);
          }
        })
        .catch((err) => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 查询
    searchData() {
      this.getPageData();
    },
    // 选中数据
    handleSelectionChange(selection) {
      this.selections = selection;
    },
    // 批量取消
    batchCancel() {
      if (!this.selections.length) {
        return this.$message.warning("请先选择要操作的数据项");
      }
      const ids = this.selections.map((item) => item.id);
      this.$axios
        .get(this.$api.knowledgeComputation.knowledgeCompletion.cancelStorage, {
          params: { ids: ids.join(",") },
        })
        .then((res) => {
          const { data, message, code } = res.data;
          if (code === 200) {
            this.getPageData();
            this.$message.success(message);
          } else {
            this.$message.warning(message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 批量入库
    batchStorage() {
      if (!this.selections.length) {
        return this.$message.warning("请先选择要操作的数据项");
      }
      const ids = this.selections.map((item) => item.id);
      this.$axios
        .get(
          this.$api.knowledgeComputation.knowledgeCompletion.confirmStorage,
          {
            params: { ids: ids.join(",") },
          }
        )
        .then((res) => {
          const { data, message, code } = res.data;
          if (code === 200) {
            this.getPageData();
            this.$message.success(message);
          } else {
            this.$message.warning(message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 入库
    storageRow(row) {
      this.$axios
        .get(
          this.$api.knowledgeComputation.knowledgeCompletion.confirmStorage,
          {
            params: { ids: [row.id].join(",") },
          }
        )
        .then((res) => {
          const { data, message, code } = res.data;
          if (code === 200) {
            this.getPageData();
            this.$message.success(message);
          } else {
            this.$message.warning(message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 取消
    cancelStore(row) {
      this.$axios
        .get(this.$api.knowledgeComputation.knowledgeCompletion.cancelStorage, {
          params: { ids: [row.id].join(",") },
        })
        .then((res) => {
          const { data, message, code } = res.data;
          if (code === 200) {
            this.getPageData();
            this.$message.success(message);
          } else {
            this.$message.warning(message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleCurrentChange() {
      this.getPageData();
    },
    handleSizeChange() {
      this.getPageData();
    },
  },
};
</script>
